<template>
  <ContentPanel
    v-infinite-scroll="loadApply"
    :infinite-scroll-immediate="false"
    :showTopBorder="true"
  >
    <div>
      <div
        class="apply-item"
        v-for="item in applyList"
        @contextmenu.prevent="onContextMenu(item, $event)"
      >
        <div>
          <Image :src="item.contactIcon" />
        </div>
        <div class="contact-info">
          <div class="nick-name">
            {{ item.contactName }}
          </div>
          <div
            class="apply-info"
            v-if="item.applyUserId == userInfoStore.getInfo().userId"
          >
            我<span class="iconfont icon-jiantou"></span>：{{ item.applyInfo }}
          </div>
          <div class="apply-info" v-else>{{ item.applyInfo }}</div>
        </div>
        <div class="op-btn">
          <div
            v-if="
              item.status == 0 && item.receiveUserId == userInfoStore.getInfo().userId
            "
          >
            <el-dropdown placement="bottom-end" trigger="click">
              <span class="el-dropdown-link">
                <el-button type="primary" size="small">接受</el-button>
              </span>
              <template #dropdown>
                <el-dropdown-item @click="dealWithApply(item.id, item.contactType, 1)"
                  >同意
                </el-dropdown-item>
                <el-dropdown-item @click="dealWithApply(item.id, item.contactType, 2)"
                  >拒绝
                </el-dropdown-item>
              </template>
            </el-dropdown>
          </div>
          <div
            v-else-if="
              item.status == 0 && item.applyUserId == userInfoStore.getInfo().userId
            "
          >
            <el-button type="primary" size="small">待处理</el-button>
          </div>
          <div v-else-if="item.status === 1" class="result-name">已同意</div>
          <div v-else-if="item.status === 2" class="result-name">已拒绝</div>
        </div>
      </div>
    </div>
    <div v-if="applyList.length == 0" class="no-data">暂无申请</div>
  </ContentPanel>
</template>

<script setup>
import ContextMenu from "@imengyu/vue3-context-menu";
import "@imengyu/vue3-context-menu/lib/vue3-context-menu.css";
import { ref, getCurrentInstance } from "vue";
import { useUserInfoStore } from "@/stores/UserInfoStore";

const { proxy } = getCurrentInstance();
const userInfoStore = useUserInfoStore();

const applyList = ref([]);
let pageNum = 0;
let totalPage = 1;
const loadApply = async () => {
  pageNum++;
  if (pageNum > totalPage) {
    return;
  }
  const res = await proxy.Api.queryContactApplyList({
    pageNum: pageNum,
  });
  if (res.code !== 200) {
    proxy.$message.error(res.message);
    return;
  } else {
    totalPage = res.data.totalPage;
    if (res.data.pageNum == 1) {
      applyList.value = [];
    }
    applyList.value = applyList.value.concat(res.data.list);
    pageNum = res.data.pageNum;
  }
};
loadApply();

const params = ref({});
const dealWithApply = (id, contactType, status) => {
  proxy.Confirm({
    message: "确定要执行操作吗?",
    okfun: async () => {
      params.value.id = id;
      params.value.status = status;
      const res = await proxy.Api.dealContactApply(params.value);
      if (res.code !== 200) {
        proxy.$message.error(res.message);
        return;
      } else {
        pageNum = 0;
        loadApply();
      }
    },
  });
};

const onContextMenu = (data, e) => {
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    items: [
      {
        icon: "icon-shanchu",
        label: "删除记录",
        onClick: () => {
          proxy.Confirm({
            message: `确定要删除该记录吗？`,
            okfun: () => {
              deleteContactApply(data.id);
            },
          });
        },
      },
    ],
  });
};

const deleteContactApply = async (id) => {
  const res = await proxy.Api.deleteContactApply(id);
  if (res.code != 200) {
    proxy.$message.error(res.message);
  } else {
    proxy.$message.success("已删除");
    pageNum = 0;
    await loadApply();
  }
};
</script>

<style lang="scss" scoped>
.apply-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 10px 0px;

  .user-contact {
    background: #08bf61;
  }

  .contact-info {
    width: 260px;
    margin-left: 10px;
    margin-bottom: 10px;

    .nick-name {
      color: #000000;
      font-size: 13px;
      font-weight: 600;
    }

    .apply-info {
      color: #999999;
      font-size: 12px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .op-btn {
    display: flex;
    margin-left: 350px;
    width: 50px;
    text-align: center;

    .result-name {
      color: #999999;
      font-size: 12px;
    }
  }
}
.no-data {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}
</style>
